<template>
	<view class="count p-20">
		<view v-for="(item,index) in list" :key="index" class="item p-20 b-f b-r-20 m-b-20">
			<view class="top f f-a-c f-j-b m-b-20">
				<view class="left">
					上课开始时间
				</view>
				<view class="right">
					{{item.start_at}}
				</view>
			</view>
			<view class="top f f-a-c f-j-b m-b-20">
				<view class="left">
					本次读书会主题
				</view>
				<view class="right">
					{{item.subject}}
				</view>
			</view>
			<view class="top f f-a-c f-j-b m-b-20">
				<view class="left">
					阅读指导老师姓名
				</view>
				<view class="right">
					{{item.teacher_name}}
				</view>
			</view>
			<!-- 上课图片 -->
			<view class="picture">
				<view class="topName">
					上课图片
				</view>
				<view class="topImg f f-a-c f-w-w">
					<image :src="ite" v-for="(ite,ind) in String(item.images).split(',')" class="img m-b-10" mode="">
					</image>
				</view>
			</view>
			<!-- 文字备注 -->
			<view class="note m-t-20">
				<view class="textNote m-b-20">
					文字备注
				</view>
				<view class="box p-20">
					{{item.remark||'--'}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				list: [],
				total: ''
			}
		},
		onLoad(options) {
			this.id = options.id
			this.initList()
		},
		onReachBottom() {
			if (this.list.length == this.total) return
			this.page++
			this.initList()
			console.log('12355');
		},
		methods: {
			async initList() {
				let n = await this.$api.book_club_offsets({
					id: this.id
				})
				this.total = n.data.total
				this.list = [...this.list, ...n.data.data]
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		width: 100%;
		height: 176rpx;
		background: #f9f9f9;
		border-radius: 16rpx;
	}

	.textNote {
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #666666;
	}

	.img {
		width: 160rpx;
		height: 160rpx;
		border-radius: 16rpx;
		margin-right: 30rpx;
	}

	.topName {
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		text-align: left;
		color: #666666;
		margin-bottom: 20rpx;
	}

	.top {
		.right {
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			color: #333333;
		}

		.left {
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: 400;
			color: #666666;
		}
	}
</style>